<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="main-wrapper">

    <div th:fragment="Favicon">
        <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/images/favicon.ico}">

        <!-- CSS
        ============================================ -->

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}">

        <!-- Icon Font CSS -->
        <link rel="stylesheet" th:href="@{/assets/css/vendor/material-design-iconic-font.min.css}">
        <link rel="stylesheet" th:href="@{/assets/css/vendor/font-awesome.min.css}">
        <link rel="stylesheet" th:href="@{/assets/css/vendor/themify-icons.css}">
        <link rel="stylesheet" th:href="@{/assets/css/vendor/cryptocurrency-icons.css}">

        <!-- Plugins CSS -->
        <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.css}">

        <!-- Helper CSS -->
        <link rel="stylesheet" th:href="@{/assets/css/helper.css}">

        <!-- Main Style CSS -->
        <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    </div>

    <!-- 头文开始 -->
    <div th:fragment="Header" class="header-section">
        <div class="container-fluid">
            <div class="row justify-content-between align-items-center">

                <!-- 标头Logo(标头左侧)开始 -->
                <div class="header-logo col-auto">
                    <a th:href="@{/main}">
                        <img th:src="@{/assets/images/logo/logo.png}" alt="">
                        <img th:src="@{/assets/images/logo/logo-light.png}" class="logo-light" alt="">
                    </a>
                </div><!-- 标头Logo(标头左侧)结束 -->

                <!-- 右侧开始 -->
                <div class="header-right flex-grow-1 col-auto">
                    <div class="row justify-content-between align-items-center">

                        <!-- 侧边标题切换和搜索开始 -->
                        <div class="col-auto">
                            <div class="row align-items-center">

                                <!--侧头开关-->
                                <div class="col-auto"><button class="side-header-toggle"><i class="zmdi zmdi-menu"></i></button></div>

                                <!--路径-->
                                <div class="col-auto">

                                    <div class="header-search">

                                        <button class="header-search-open d-block d-xl-none"><i class="zmdi zmdi-search"></i></button>

                                        <div class="header-search-form">
                                            <form action="#">
                                                <input type="text" placeholder="Search Here">
                                                <button><i class="zmdi zmdi-search"></i></button>
                                            </form>
                                            <button class="header-search-close d-block d-xl-none"><i class="zmdi zmdi-close"></i></button>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div><!-- 侧标题切换和搜索结束 -->

                        <!-- 标题通知区开始 -->
                        <div class="col-auto">

                            <ul class="header-notification-area">

                                <!--语言-->
                                <li class="adomx-dropdown position-relative col-auto">
                                    <a class="toggle" href="#"><img class="lang-flag" th:src="@{/assets/images/flags/flag-1.jpg}" alt=""><i class="zmdi zmdi-caret-down drop-arrow"></i></a>

                                    <!-- 下拉菜单 -->
                                    <ul class="adomx-dropdown-menu dropdown-menu-language">
                                        <li><a href="#"><img th:src="@{/assets/images/flags/flag-1.jpg}" alt=""> 英文</a></li>
                                        <li><a href="#"><img th:src="@{/assets/images/flags/flag-2.jpg}" alt=""> 中文</a></li>
                                        <li><a href="#"><img th:src="@{/assets/images/flags/flag-3.jpg}" alt=""> Spanish </a></li>
                                        <li><a href="#"><img th:src="@{/assets/images/flags/flag-4.jpg}" alt=""> Germany</a></li>
                                    </ul>

                                </li>

                                <!--邮箱-->
                                <li class="adomx-dropdown col-auto">
                                    <a class="toggle" href="#"><i class="zmdi zmdi-email-open"></i><span class="badge"></span></a>

                                    <!-- 下拉菜单 -->
                                    <div class="adomx-dropdown-menu dropdown-menu-mail">
                                        <div class="head">
                                            <h4 class="title">未读信息</h4>
                                        </div>
                                        <div class="body custom-scroll">
                                            <ul>
                                                <li>
                                                    <a href="#">
                                                        <div class="image"><img th:src="@{/assets/images/avatar/avatar-2.jpg}" alt=""></div>
                                                        <div class="content">
                                                            <h6>S子:新帐户</h6>
                                                            <p>《洛雷姆·伊普索姆》的段落有很多变体 </p>
                                                        </div>
                                                        <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="image"><img th:src="@{/assets/images/avatar/avatar-1.jpg}" alt=""></div>
                                                        <div class="content">
                                                            <h6>分科:邮件支持</h6>
                                                            <p>《洛雷姆·伊普索姆》的段落有很多变体 </p>
                                                        </div>
                                                        <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="image"><img th:src="@{/assets/images/avatar/avatar-2.jpg}" alt=""></div>
                                                        <div class="content">
                                                            <h6>分项:产品查询</h6>
                                                            <p>《洛雷姆·伊普索姆》的段落有很多变体</p>
                                                        </div>
                                                        <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="image"><img th:src="@{/assets/images/avatar/avatar-1.jpg}" alt=""></div>
                                                        <div class="content">
                                                            <h6>分科:邮件支持</h6>
                                                            <p>《洛雷姆·伊普索姆》的段落有很多变体 </p>
                                                        </div>
                                                        <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>

                                <!--通知-->
                                <li class="adomx-dropdown col-auto">
                                    <a class="toggle" href="#"><i class="zmdi zmdi-notifications"></i><span class="badge"></span></a>

                                    <!-- 下拉菜单 -->
                                    <div class="adomx-dropdown-menu dropdown-menu-notifications">
                                        <div class="head">
                                            <h5 class="title">你有4个新的通知。</h5>
                                        </div>
                                        <div class="body custom-scroll">
                                            <ul>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-notifications-none"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-block"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-info-outline"></i>
                                                        <<p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-shield-security"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-notifications-none"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-block"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-info-outline"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i class="zmdi zmdi-shield-security"></i>
                                                        <p>有许多不同的页面可用。</p>
                                                        <span>今天上午11点</span>
                                                    </a>
                                                    <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="footer">
                                            <a href="#" class="view-all">查看全部</a>
                                        </div>
                                    </div>

                                </li>

                                <!--用户管理-->
                                <li class="adomx-dropdown col-auto">
                                    <a class="toggle" href="#">
                                            <span class="user">
                                        <span class="avatar">
                                            <img th:src="@{/assets/images/avatar/avatar-1.jpg}" alt="">
                                            <span class="status"></span>
                                            </span>
                                            <span class="name">昵称</span>
                                            </span>
                                    </a>

                                    <!-- 下拉菜单 -->
                                    <div class="adomx-dropdown-menu dropdown-menu-user">
                                        <div class="head">
                                            <h5 class="name"><a href="#">昵称</a></h5>
                                            <a class="mail" href="#">邮箱</a>
                                        </div>
                                        <div class="body">
                                            <ul>
                                                <li><a href="#"><i class="zmdi zmdi-account"></i>个人中心</a></li>
                                                <li><a href="#"><i class="zmdi zmdi-email-open"></i>邮箱</a></li>
                                                <li><a href="#"><i class="zmdi zmdi-wallpaper"></i>照片</a></li>
                                            </ul>
                                            <ul>
                                                <li><a href="#"><i class="zmdi zmdi-settings"></i>设置</a></li>
                                                <li><a href="#"><i class="zmdi zmdi-lock-open"></i>密码</a></li>
                                            </ul>
                                            <ul>
                                                <li><a href="#"><i class="zmdi zmdi-paypal"></i>支付</a></li>
                                                <li><a href="#"><i class="zmdi zmdi-google-pages"></i>账单</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>

                            </ul>

                        </div><!-- 报头通知区结束-->

                    </div>
                </div><!-- 头右端  -->

            </div>
        </div>
    </div><!-- 头部结束 -->
    <!-- 侧边导航栏开始 -->
    <div th:fragment="Topbbar" class="side-header show">
        <button class="side-header-close"><i class="zmdi zmdi-close"></i></button>
        <!-- 侧箱内启动 -->
        <div class="side-header-inner custom-scroll">

            <nav class="side-header-menu" id="side-header-menu">
                <ul>
                    <li><a th:href="@{/main}"><i class="ti-palette"></i> <span>数据概览</span></a></li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-package"></i> <span>客户管理</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a th:href="@{/management}"><span>客户管理</span></a></li>
                            <li><a th:href="@{/information}"><span>客户详情</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-crown"></i> <span>产品管理</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a th:href="@{/product-list}"><span>产品详情</span></a></li>
                            <li><a th:href="@{/add-product}"><span>添加产品</span></a></li>
                            <li><a th:href="@{/update-product}"><span>更新产品</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-stamp"></i> <span>订单管理</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a th:href="@{/orders-list}"><span>历史订单</span></a></li>
                            <li><a th:href="@{/orders-details}"><span>订单详情</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-notepad"></i> <span>Forms</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="form-basic-elements.html"><span>Basic Elements</span></a></li>
                            <li><a href="form-checkbox.html"><span>Checkbox</span></a></li>
                            <li><a href="form-date-mask.html"><span>Date & Mask</span></a></li>
                            <li><a href="form-editor.html"><span>Editor</span></a></li>
                            <li><a href="form-file-upload.html"><span>File Upload</span></a></li>
                            <li><a href="form-layout.html"><span>Layout</span></a></li>
                            <li><a href="form-radio.html"><span>Radio</span></a></li>
                            <li><a href="form-range-slider.html"><span>Range Slider</span></a></li>
                            <li><a href="form-selects.html"><span>Selects</span></a></li>
                            <li><a href="form-switchers.html"><span>Switchers</span></a></li>
                            <li><a href="form-wizard.html"><span>Wizard</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-layout"></i> <span>Table</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="table-basic.html"><span>Basic</span></a></li>
                            <li><a href="table-data-table.html"><span>Data Table</span></a></li>
                            <li><a href="table-footable.html"><span>Footable</span></a></li>
                            <li><a href="table-jsgrid.html"><span>Jsgrid</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-pie-chart"></i> <span>Charts</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="chart-chartjs.html"><span>ChartJs</span></a></li>
                            <li><a href="chart-echarts.html"><span>Echarts</span></a></li>
                            <li><a href="chart-google.html"><span>Google Chart</span></a></li>
                            <li><a href="chart-morris.html"><span>Morris  Chart</span></a></li>
                            <li><a href="chart-sparkline.html"><span>Sparkline  Chart</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-map"></i> <span>Maps</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="map-vector.html"><span>Vector Map</span></a></li>
                            <li><a href="map-google.html"><span>Google Map</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-shopping-cart"></i> <span>商品管理</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="add-product.html"><span>添加产品</span></a></li>
                            <li><a href="edit-product.html"><span>编辑产品</span></a></li>
                            <li><a href="invoice-list.html"><span>发票</span></a></li>
                            <li><a href="invoice-details.html"><span>发票详情信息</span></a></li>
                            <li><a href="order-list.html"><span>订单列表</span></a></li>
                            <li><a href="order-details.html"><span>订单详情</span></a></li>
                            <li><a href="manage-products.html"><span>管理产品</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-gift"></i> <span>Apps</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="chat.html"><span>Chat</span></a></li>
                            <li><a href="mail.html"><span>Mail</span></a></li>
                            <li><a href="single-mail.html"><span>Single Mail</span></a></li>
                            <li><a href="todo-list.html"><span>Todo List</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-lock"></i> <span>Authentication</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="login.html"><span>login</span></a></li>
                            <li><a href="register.html"><span>register</span></a></li>
                            <li><a href="author-profile.html"><span>Profile</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub-menu"><a href="#"><i class="ti-layers"></i> <span>Pages</span></a>
                        <ul class="side-header-sub-menu">
                            <li><a href="blank.html"><span>Blank</span></a></li>
                            <li><a href="timeline.html"><span>Timeline</span></a></li>
                            <li><a href="pricing.html"><span>Pricing</span></a></li>
                            <li><a href="error-1.html"><span>error-1</span></a></li>
                            <li><a href="error-2.html"><span>error-2</span></a></li>
                        </ul>
                    </li>

                </ul>
            </nav>

        </div><!-- 侧箱内端 -->
    </div><!-- 侧封头端 -->

    <!-- 页脚部分开始 -->
    <div  th:fragment="Footer" class="footer-section">
        <div class="container-fluid">

            <div class="footer-copyright text-center">
                <p class="text-body-light">2019 &copy; <a href="http://www.booTStrapmb.com">Codecarnival</a></p>
            </div>

        </div>
    </div><!-- 页脚部分结束 -->

</div>

<!-- ====================Jsp======================== -->
<div th:fragment="Jsp">
    <!-- Global Vendor, plugins & Activation JS -->
    <script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/popper.min.js}"></script>
    <script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
    <!--Plugins JS-->
    <script th:src="@{/assets/js/plugins/perfect-scrollbar.min.js}"></script>
    <script th:src="@{/assets/js/plugins/tippy4.min.js.js}"></script>
    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>

    <!-- Plugins & Activation JS For Only This Page -->

    <!--Moment-->
    <script th:src="@{/assets/js/plugins/moment/moment.min.js}"></script>

    <!--Daterange Picker-->
    <script th:src="@{/assets/js/plugins/daterangepicker/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/plugins/daterangepicker/daterangepicker.active.js}"></script>


    <!-- Plugins & Activation JS For Only This Page -->
    <script th:src="@{/assets/js/plugins/datatables/datatables.min.js}"></script>
    <script th:src="@{/assets/js/plugins/datatables/datatables.active.js}"></script>

    <!--Echarts-->
    <script th:src="@{/assets/js/plugins/chartjs/Chart.min.js}"></script>
    <script th:src="@{/assets/js/plugins/chartjs/chartjs.active.js}"></script>

    <!--VMap-->
    <script th:src="@{/assets/js/plugins/vmap/jquery.vmap.min.js}"></script>
    <script th:src="@{/assets/js/plugins/vmap/maps/jquery.vmap.world.js}"></script>
    <script th:src="@{/assets/js/plugins/vmap/maps/samples/jquery.vmap.sampledata.js}"></script>
    <script th:src="@{/assets/js/plugins/vmap/vmap.active.js}"></script>
</div>
</body>
</html>